import React, { useState, useEffect, } from 'react'
import { useNavigate } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import { Tabs } from 'antd-mobile'

export default function Gongf() {
    const location = useLocation()
    const navigate = useNavigate()
    const i = location.state
    return (
        <div style={{ position: 'relative', top: '-30px' }}>
            {
                i ? (
                    <div style={{}}>
                        <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u181.svg' alt='' width='100%' ></img>
                    </div>
                ) : (
                    <p>加载失败</p>
                )
            }
            <div style={{ position: 'absolute', top: '50px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
                <div style={{ marginLeft: '5px' }} onClick={() => navigate('/feiyigongfanf')}>
                    <svg t="1739844370313" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6651" width="30" height="30"><path d="M512 32C246.4 32 32 246.4 32 512s214.4 480 480 480 480-214.4 480-480S777.6 32 512 32z m70.4 723.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L288 550.4c-12.8-12.8-12.8-32 0-44.8L537.6 256c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-227.2 227.2 227.2 227.2z" p-id="6652" fill="#ffffff"></path></svg>
                </div>
                <div style={{ background: '#fff', borderRadius: '50%', width: '30px', height: '30px', matgin: '0 auto', marginLeft: '360px' }}>
                    <img style={{ marginLeft: '5px', marginTop: '5px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u243.svg' alt=''></img>
                </div>
                <div style={{ background: '#f3f0e7', width: '100%', height: '100vh', marginTop: '220px', borderRadius: '35px' }}>
                    <div style={{ marginTop: '20px', marginLeft: '20px', fontSize: '18px' }}>
                        <p>{i.name}<img style={{ marginLeft: '80px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u241.svg'></img></p>
                        <hr style={{ marginTop: '10px', marginBottom: '10px' }} />
                        <p style={{ marginTop: '10px', marginBottom: '10px', fontSize: '14px', color: 'gray' }}>联系电话：{i.dian}</p>
                        <p style={{ marginTop: '10px', marginBottom: '10px', fontSize: '14px', color: 'gray' }}>开发时间：{i.shijian}</p>
                        <p style={{ marginTop: '10px', marginBottom: '10px', fontSize: '14px', color: 'gray' }}>工坊地址：{i.dizhi}</p>
                    </div>
                    <Tabs style={{ background: '#f3f0e7', marginTop: '25px' }}>
                        <Tabs.Tab title='简介' key='fruits'>
                            <div style={{ marginTop: '20px' }}>
                                <p>工坊创始人</p>
                                <p>{i.chuan}————代表性传承人</p>
                                <br />
                                <br />
                                <p>工坊简介</p>
                                <p style={{ fontSize: '15px' }}>{i.jian}</p>
                            </div>

                        </Tabs.Tab>
                        <Tabs.Tab title='动态' key='vegetables'>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ width: '45%' }}>
                                    <div><img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/%E5%95%86%E5%93%81%E5%9B%BE%E7%89%87_u210.svg'></img></div>
                                    <p>以文化为根，以技艺为魂</p>
                                    <br />
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <div>
                                            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u211.svg'></img>
                                        </div>
                                        <p>囍悦藏羌绣</p>
                                        <div>
                                            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u213.svg'></img>
                                            <span>10</span>
                                        </div>
                                    </div>
                                </div>
                                <div style={{ width: '45%' }}>
                                    <div><img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/%E5%95%86%E5%93%81%E5%9B%BE%E7%89%87_u210.svg'></img></div>
                                    <p>以文化为根，以技艺为魂</p>
                                    <br />
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <div>
                                            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u211.svg'></img>
                                        </div>
                                        <p>囍悦藏羌绣</p>
                                        <div>
                                            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u213.svg'></img>
                                            <span>10</span>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </Tabs.Tab>
                        <Tabs.Tab title='评论' key='vegetabless'>
                            <div>
                                <p style={{ fontWeight: 'bold' }}>30条评论</p>
                                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '25px' }}>
                                    <div style={{ display: 'flex' }}>
                                        <div>
                                            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u218.svg' alt=''></img>
                                        </div>
                                        <div style={{ marginLeft: '10px' }}>
                                            <p>月野兔</p>
                                            <p>体验感很好</p>
                                            <p style={{ color: 'gray', marginBottom: '5px', marginTop: '3px' }}>8-20 14:10</p>
                                            <p>——展开2条回复<svg t="1739860298063" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14018" width="12" height="12"><path d="M500.096 702.60736h-23.80288v-23.808h-23.80288v-23.80288h-23.808v-23.80288h-23.80288v-23.808h-23.86944v-23.808h-23.80288v-23.86944h-23.80288v-23.80288h-23.808v-23.80288h-23.808v-23.808h-23.808v-23.80288h-23.80288v-23.808h-23.86944v-23.80288h-23.80288V393.0112h-23.80288v-23.80288h-23.808v-23.808H119.0912v-23.808h-23.80288v-23.80288H71.4752v-23.80288H0v71.41376h23.80288v23.808h23.86944v23.80288h23.80288v23.86944h23.81312v23.80288h23.80288v23.808h23.80288v23.80288h23.808v23.808h23.80288v23.80288h23.80288v23.80288h23.86944v23.86944h23.80288v23.808h23.808v23.808h23.808v23.80288h23.808v23.80288h23.80288v23.808h23.80288v23.80288h23.86944v23.86944h23.80288v23.80288h23.808v23.80288h23.80288v23.808H547.77344v-23.808h23.80288v-23.80288h23.808v-23.80288h23.808v-23.86944h23.80288v-23.80288h23.80288v-23.808h23.80288v-23.80288h23.86944v-23.80288h23.808v-23.808h23.80288v-23.808h23.808v-23.86944h23.80288v-23.80288h23.808v-23.80288h23.80288v-23.808h23.80288v-23.80288h23.86944v-23.808h23.808v-23.80288h23.80288V393.0112h23.808v-23.80288h23.80288v-23.808H1024V273.98656h-71.41376v23.80288h-23.80288v23.80288h-23.808v23.808h-23.86944v23.808h-23.80288v23.80288h-23.80288v23.86944h-23.808v23.80288h-23.80288v23.808h-23.808v23.80288h-23.80288v23.808h-23.808v23.80288h-23.86944v23.80288h-23.80288v23.86944h-23.80288v23.808h-23.80288v23.808h-23.808v23.80288h-23.808v23.80288h-23.86432v23.808h-23.808v23.80288h-23.808z" p-id="14019"></path></svg></p>
                                        </div>
                                    </div>

                                    <div style={{}}>
                                        <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u213.svg'></img>
                                        <span>23</span>
                                        <p style={{ marginTop: '20px' }}>回复</p>
                                    </div>
                                </div>
                                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '25px' }}>
                                    <div style={{ display: 'flex' }}>
                                        <div>
                                            <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u225.svg' alt=''></img>
                                        </div>
                                        <div style={{ marginLeft: '10px' }}>
                                            <p>百变小樱</p>
                                            <p>中国非物质文化遗产</p>
                                            <p style={{ color: 'gray', marginBottom: '5px', marginTop: '3px' }}>8-20 14:10</p>
                                            <p>——展开2条回复<svg t="1739860298063" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14018" width="12" height="12"><path d="M500.096 702.60736h-23.80288v-23.808h-23.80288v-23.80288h-23.808v-23.80288h-23.80288v-23.808h-23.86944v-23.808h-23.80288v-23.86944h-23.80288v-23.80288h-23.808v-23.80288h-23.808v-23.808h-23.808v-23.80288h-23.80288v-23.808h-23.86944v-23.80288h-23.80288V393.0112h-23.80288v-23.80288h-23.808v-23.808H119.0912v-23.808h-23.80288v-23.80288H71.4752v-23.80288H0v71.41376h23.80288v23.808h23.86944v23.80288h23.80288v23.86944h23.81312v23.80288h23.80288v23.808h23.80288v23.80288h23.808v23.808h23.80288v23.80288h23.80288v23.80288h23.86944v23.86944h23.80288v23.808h23.808v23.808h23.808v23.80288h23.808v23.80288h23.80288v23.808h23.80288v23.80288h23.86944v23.86944h23.80288v23.80288h23.808v23.80288h23.80288v23.808H547.77344v-23.808h23.80288v-23.80288h23.808v-23.80288h23.808v-23.86944h23.80288v-23.80288h23.80288v-23.808h23.80288v-23.80288h23.86944v-23.80288h23.808v-23.808h23.80288v-23.808h23.808v-23.86944h23.80288v-23.80288h23.808v-23.80288h23.80288v-23.808h23.80288v-23.80288h23.86944v-23.808h23.808v-23.80288h23.80288V393.0112h23.808v-23.80288h23.80288v-23.808H1024V273.98656h-71.41376v23.80288h-23.80288v23.80288h-23.808v23.808h-23.86944v23.808h-23.80288v23.80288h-23.80288v23.86944h-23.808v23.80288h-23.80288v23.808h-23.808v23.80288h-23.80288v23.808h-23.808v23.80288h-23.86944v23.80288h-23.80288v23.86944h-23.80288v23.808h-23.80288v23.808h-23.808v23.80288h-23.808v23.80288h-23.86432v23.808h-23.808v23.80288h-23.808z" p-id="14019"></path></svg></p>
                                        </div>
                                    </div>

                                    <div style={{}}>
                                        <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u213.svg'></img>
                                        <span>23</span>
                                        <p style={{ marginTop: '20px' }}>回复</p>
                                    </div>
                                </div>
                                <div style={{ marginTop: '40px', marginLeft: '20px' }}>
                                    <input type='text' placeholder='说点什么吧' style={{ border: 'none', background: '#f5ecd4', width: '95%', height: '50px', borderRadius: '50px', padding: '0 0 0 10px', color: '#b87456' }} ></input>
                                </div>
                            </div>

                        </Tabs.Tab>
                    </Tabs>


                </div>
            </div>

        </div>
    )
}
